<template>
    <div class='buffer'>
        <div class="spinner">
            <span class='buffer_tip' :style="{color:textColor}">{{text}}</span>
            <p class="rect1" :style="{backgroundColor:spinColor}"></p>
            <p class="rect2" :style="{backgroundColor:spinColor}"></p>
            <p class="rect3" :style="{backgroundColor:spinColor}"></p>
            <p class="rect4" :style="{backgroundColor:spinColor}"></p>
            <p class="rect5" :style="{backgroundColor:spinColor}"></p>
            <p class="rect6" :style="{backgroundColor:spinColor}"></p>
            <p class="rect7" :style="{backgroundColor:spinColor}"></p>
            <p class="rect8" :style="{backgroundColor:spinColor}"></p>
            <p class="rect9" :style="{backgroundColor:spinColor}"></p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WaveLoading",
        props: {
            text: {
                type: String,
                default: ''
            },
            textColor: '',
            spinColor: '',
        }
    }
</script>

<style scoped>

    .buffer {
        /*background-color: black;*/
        height: 120px;
        width: 60%;
        margin: auto;
        filter: alpha(Opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.85;
        border-radius: 7px;
    }

    .buffer_tip {
        color: #42b983;
        font-size: 20px;
        display: block;
        padding-top: 15px;
    }

    .spinner {
        margin: 0 auto;
        height: 40px;
        text-align: center;
        font-size: 10px;
    }

    .spinner > p {
        background-color: #42b983;
        height: 100%;
        width: 6px;
        border-radius: 3px;
        display: inline-block;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        animation-delay: -0.8s;
    }

    .spinner .rect6 {
        animation-delay: -0.7s;
    }

    .spinner .rect7 {
        animation-delay: -0.6s;
    }

    .spinner .rect8 {
        animation-delay: -0.5s;
    }

    .spinner .rect9 {
        animation-delay: -0.4s;
    }

    @keyframes stretchdelay {
        0%, 100% {
            transform: scaleY(0.1);
        }
        50% {
            transform: scaleY(1.0);
        }
    }
</style>
